<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="">
        <el-date-picker
          format="YYYY"
          value-format="YYYY-MM-DD"
          style="width: 140px"
          v-model="queryParams.alarmTime"
          type="datetime"
          placeholder="请选择日期"
        />
      </el-form-item>
      <el-form-item label="">
        <el-input style="width: 140px" v-model="queryParams.organizationName" placeholder="单位" @focus="focusWorkArea('单位', 1)" />
      </el-form-item>
      <el-form-item label="">
        <el-input style="width: 140px" v-model="queryParams.maintenanceContent" placeholder="维修内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList" style="width: 90px">查询</el-button>
        <el-button @click="resetQuery" style="width: 90px">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table :key="Math.random()" v-loading="loading" :data="railList" height="58vh" border>
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="工区" prop="organizationName" min-width="80" />
      <el-table-column label="维修内容" prop="维修内容" min-width="80" />
      <el-table-column label="已完成的维修数量" prop="已完成的维修数量" min-width="80" />
    </el-table>
    <el-pagination
      :current-page="currentPage4"
      :page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      background="background"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
      <el-form ref="userRef" :model="form" :rules="rules" label-width="120px" :inline="true">
        <div v-if="taskType == '降雨巡视'">
          <el-row>
            <el-col :span="11">
              <el-form-item label="责任区段" prop="dutyZone">
                <el-input disabled v-model="form.dutyZone" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="责任工区" prop="dutyWork">
                <el-input disabled v-model="form.dutyWork" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="雨量计地点" prop="pluviometricPlace">
                <el-input disabled v-model="form.pluviometricPlace" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="预警状态" prop="alarmState">
                <el-input disabled v-model="form.alarmState" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="rainfallBox">
            <p>最高降雨量</p>
            <p>
              <span>10分钟/mm</span>
              <span>1小时/mm</span>
              <span>日/mm</span>
            </p>
            <p>
              <span>{{ form.rainfallMinute }}</span>
              <span>{{ form.rainfallHour }}</span>
              <span>{{ form.rainfallDay }}</span>
            </p>
          </div>
        </div>
        <div v-else-if="taskType == '险情上报'">
          <el-row>
            <el-col :span="11">
              <el-form-item label="应急类型" prop="emergencyType">
                <el-input disabled v-model="form.emergencyType" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="风险类型" prop="riskType">
                <el-input disabled v-model="form.riskType" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="风险位置" prop="riskLocation">
                <el-input disabled v-model="form.riskLocation" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="责任工区" prop="dutyWork">
                <el-input disabled v-model="form.dutyWork" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="责任人" prop="dutyUser">
                <el-input disabled v-model="form.dutyUser" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="上报时间" prop="createTime">
                <el-input disabled v-model="form.createTime" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="险情评估" prop="dangerousOmenAssess">
                <el-input disabled v-model="form.dangerousOmenAssess" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="现场图片" prop="scenePicture">
                <el-input disabled v-model="form.scenePicture" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="11">
              <el-form-item label="临近车站" prop="nearStation">
                <el-input disabled v-model="form.nearStation" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="网格管理员" prop="griddingAdministrator">
                <el-input disabled v-model="form.griddingAdministrator" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="告警地段" prop="alarmDistrict">
                <el-input disabled v-model="form.alarmDistrict" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="告警时间" prop="alarmTime">
                <el-input disabled v-model="form.alarmTime" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="视频图像" prop="videoImage">
                <el-input disabled v-model="form.videoImage" placeholder="请输入行别" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="工区" v-model="isShowWorkArea" width="350px" append-to-body draggable>
      <tree @handleCheckTree="handleCheckTree" v-if="isShowWorkArea" :organizationId="organizationId"></tree>
    </el-dialog>
  </div>
</template>

<script setup name="Bridge">
import { selectProEmergencyTaskList, selectProEmergencyTaskByDetail } from "@/api/main/yearPlan.js";
import { listdictionaries } from "@/api/main/dataDictionary.js";
import { ElMessage } from "element-plus";
import tree from "@/components/planModle/tree.vue";
import { reactive, ref, toRefs } from "vue";
import { formatDate } from "@/utils";
const { proxy } = getCurrentInstance();
const title = ref("新增");
const loading = ref(true);
const open = ref(false);

const data = reactive({
  railList: [],
  selecttabList: [],
  form: {},
  queryParams: {
    pageNumber: "1",
    pageSize: "10",
    alarmTime: "",
    organizationName: "",
    organizationId: "",
    maintenanceContent: "",
  },
  rules: {},
});

const { queryParams, railList, selecttabList, form, rules } = toRefs(data);

//分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const total = ref(10);
const handleSizeChange = (val) => {
  pageSize4.value = val;
  getList();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  getList();
  console.log(`current page: ${val}`);
};

/** 查询列表 */
function getList() {
  loading.value = true;
  queryParams.value.pageNum = currentPage4.value;
  queryParams.value.pageSize = pageSize4.value;
  selectProEmergencyTaskList(queryParams.value).then((res) => {
    if (res.code == 200) {
      data.railList = res.data;
      total.value = res.count;
    }
    loading.value = false;
  });
  listdictionaries().then((res) => {
    if (res.code == 200) {
      data.selecttabList = res.data;
    }
  });
}
getList();

/** 重置操作表单 */
function reset() {
  form.value = {
    id: "",
    // 降雨巡视
    dutyZone: "",
    dutyWork: "",
    pluviometricPlace: "",
    alarmState: "",
    rainfallMinute: "",
    rainfallHour: "",
    rainfallDay: "",
    //   @ApiModelProperty(value = "雨量")
    // private String rainfallMinute;

    // /** 雨量（1小时/mm） */
    // @Excel(name = "雨量", readConverterExp = "1=小时/mm")
    // @ApiModelProperty(value = "雨量")
    // private String rainfallHour;

    // /** 雨量（1日/mm） */
    // @Excel(name = "雨量", readConverterExp = "1=日/mm")
    // @ApiModelProperty(value = "雨量")
    // private String rainfallDay;
    // 险情上报
    emergencyType: "",
    riskType: "",
    riskLocation: "",
    dutyUser: "",
    createTime: "",
    dangerousOmenAssess: "",
    scenePicture: "",
    // 动物侵限 非作业计划上道 路外人员非法上道
    nearStation: "",
    griddingAdministrator: "",
    alarmDistrict: "",
    alarmTime: "",
    videoImage: "",
  };
  proxy.resetForm("userRef");
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
//重置
function resetQuery() {
  queryParams.value = {
    pageNumber: "1",
    pageSize: "10",
    unitName: "",
    centreMileage: "",
  };
  getList();
}

//工区
const focusType = ref("");
const focusTypeIndex = ref("");
const organizationId = ref("");
const isShowWorkArea = ref(false);
function focusWorkArea(type, num, index) {
  focusType.value = num;
  focusTypeIndex.value = index;
  isShowWorkArea.value = true;
  organizationId.value = sessionStorage.getItem("organizationId");
  if (num == 5) {
    organizationId.value = "";
  }
}
function handleCheckTree(data) {
  if (focusType.value == 1) {
    queryParams.value.organizationName = data.organizationFullName;
    queryParams.value.organizationId = data.organizationId;
  } else if (focusType.value == 3) {
    forma.value.organizationName = data.organizationFullName;
    forma.value.organizationId = data.organizationId;
    workAreaTree.value.workArea = data.organizationFullName;
    workAreaTree.value.workAreaId = data.organizationId;
    intelligenceVueRef.value.getList1();
  }
}
</script>

<style scoped lang="scss">
.divflex {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }

  .mainz {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
  }

  .rightx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }
}

.buttontext {
  .el-button:hover {
    text-decoration: line-through !important;
  }
}

.el-form--inline .el-form-item.formitemcla {
  margin-right: 5px !important;
}
</style>
